<template>
  <div class="home">
    <template>
      <van-search
        class="search"
        shape="round"
        v-model="value"
        placeholder="请输入搜索关键词"
      />
    </template>

    <template v-if="images">
      <van-swipe :autoplay="3000">
        <van-swipe-item
          v-for="(image, index) in images[0].content"
          :key="index"
        >
          <!-- <img :src="image.content.src" /> -->
          <img class="banner" :src="image.src" alt="" />
        </van-swipe-item>
      </van-swipe>
    </template>

    <template v-if="images">>
      <div v-for="(l, i) in images[1].content" :key="i" class="smallimg">
      <img :src="l.src" alt="" />
    </div>
    </template>
    

    <template v-if="images">
      <div class="jiu">
        <van-grid :border="false" :column-num="2">
          <van-grid-item v-for="(l, i) in images[2].content" :key="i">
            <van-image :src="l.src"/>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="shi">
        <van-grid :border="false" :column-num="2">
          <van-grid-item v-for="(l, i) in images[3].content" :key="i">
            <van-image :src="l.src" />
          </van-grid-item>
        </van-grid>
      </div>
    </template>
    <template
    v-if="images"
      ><div v-for="l in images[4].content" :key="l.uuid">
        <img :src="l.src" alt="" /></div
    ></template>

    <template v-if="images">
      <div class="jiu">
        <van-grid :border="false" :column-num="2">
          <van-grid-item v-for="(l, i) in images[5].content" :key="i">
            <van-image :src="l.src" />
          </van-grid-item>
        </van-grid>
      </div>
      <div class="shi">
        <van-grid :border="false" :column-num="2">
          <van-grid-item v-for="(l, i) in images[6].content" :key="i">
            <van-image :src="l.src" />
          </van-grid-item>
        </van-grid>
      </div>
    </template>


     <template
    v-if="images"
      ><div v-for="l in images[7].content" :key="l.uuid">
        <img :src="l.src" alt="" /></div
    ></template>

    <template v-if="images">
      <div class="jiu">
        <van-grid :border="false" :column-num="2">
          <van-grid-item v-for="(l, i) in images[8].content" :key="i">
            <van-image :src="l.src" />
          </van-grid-item>
        </van-grid>
      </div>
      <div class="shi">
        <van-grid :border="false" :column-num="2">
          <van-grid-item v-for="(l, i) in images[9].content" :key="i">
            <van-image :src="l.src" />
          </van-grid-item>
        </van-grid>
      </div>
    </template>

    <template v-if="shopp">
      <div>
        <van-grid :border="false" :column-num="2">
          <van-grid-item v-for="(l, i) in shopp" :key="i">
            <van-image :src="l.images" @click="gotofilm(l.spuId)" />
            <p class="skuname">{{l.skuName}}</p>
            <p><i class="price">${{l.discountPrice}}</i></p>
          </van-grid-item>
        </van-grid>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      images: null,
      value: null,
      shopp:null
    };
  },
  methods: {
    // getbanner(){
    //   this.$ajax.getChui({
    //     channel_id:1002
    // }).then(res=>{
    //   console.log(res)
    // })
    // }
  },
  created() {
    this.$ajax.getChui().then((res) => {
      this.images = res.data;
      console.log(this.images);
    });

    this.$ajax.getzi().then((res)=>{
      this.shopp=res.data.skuInfo
      console.log(this.shopp)
    })
  },
};
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
}
.search {
  position: absolute;
  z-index: 100;
  width: 100%;
  background: #0000;
}
.home {
  padding-bottom: 40px;
  position: relative;
  img {
    width: 100%;
  }
  .smallimg {
    margin-top: -10px;
    position: relative;
    z-index: 10;
  }
  .jiu {
    margin-top: -30px;
  }
  .shi {
    margin-top: -25px;
  }
  .skuname{
    font-size: 10px;
  }
  .price{
    font-size: 10px;
    font-weight: 600;
    color: red;
  }
}
</style>